$(function () {
  let $reply = $('.reply_a_tag');
  let $comment = $('.comment-btn');
  let comment_count = parseInt($('.comment-count').html());
  //二级回复部分
  $('.comment-list').delegate('a,input', 'click', function () {

    //委托事件,二级回复js
    let sClassValue = $(this).prop('class');

    //根据点击的下标判断点击的是哪一个
    // alert(sClassValue);
    if (sClassValue.indexOf('reply_a_tag') >= 0) {
      // 一级评论回复按钮
      $(this).next().toggle()
    }
    if (sClassValue.indexOf('reply_cancel') >= 0) {
      // 子评论取消按钮
      $(this).parent().toggle()
    }
    if (sClassValue.indexOf('reply_btn') >= 0) {
      // 子评论回复按钮
      let son_comment_content = $(this).prev().val();
      let $this = $(this);
      //获取子评论输入框的内容
      if (son_comment_content.length === 0 || (/^[ ]+$/).test(son_comment_content)) {
        //判断输入的内容是否为空或者全部都是空字符
        message.showError("回复内容为空");
        return
      }
      else {
        let parent_id = $(this).parent().data('parent-id');
        let news_id = $(this).parent().data('news-id');
        let reply_info = {
          'content': son_comment_content,
          'news_id': news_id,
          'parent_id': parent_id
        };
        $.ajax({
          method: 'POST',
          url: `/news/comments/${news_id}/`,
          contentType: 'application/json;charset=utf-8',
          data: JSON.stringify(reply_info),
          type: 'json',
          async: false
        })
            .done(function (res) {
              if (res.no === "0") {
                $this.parent().toggle();
                let item = res.data;
                // console.log(item);
                let comment_li = `
                <li class="comment-item">
                                <div class="comment-info clearfix">
                                    <img src="/static/images/avatar.jpeg" alt="avatar" class="comment-avatar">
                                    <span class="comment-user">${item.author}</span>
                                </div>
                                <div class="comment-content">${item.content}</div>
                           
                                    <div class="parent_comment_text">
                                        <div class="parent_username">[ 回复 ]&nbsp;${ item.parent.author }： ${ item.parent.content }</div>
                                        <br/>
                                    </div>
                            
                                <div class="comment_time left_float">${ item.update_time }</div>
                                <a href="javascript:void(0);" class="reply_a_tag right_float">回复</a>
                                <form class="reply_form left_float"
                                      data-parent-id="${item.id}"
                                      data-news-id="${item.news_id}">
                                    <textarea class="reply_input"></textarea>
                                    <input type="button" value="回复" class="reply_btn right_float">
                                    <input type="reset" name="" value="取消" class="reply_cancel right_float">
                                </form>
                </li>`;
                $('.comment-list').prepend(comment_li);
                //将最新评论加入到最前面
                comment_count += 1;
                $('.comment-count').html(comment_count);
                //文章评论数量+1
              }
              else if (res.no === "4101") {
                message.showError(res.msg);
                setTimeout(function () {
                  window.location.href = '/user/login/'
                }, 1500)
              }
              else {
                message.showError(res.msg)
              }

            })
            .fail(function () {
              message.showError('服务器超时，请重试！');
            })
      }
    }

  });

  //一级评论部分
  $comment.click(function () {
    //一级评论js
    let comment = $('.comment').val();
    //获取评论输入框的内容
    if (comment.length === 0 || (/^[ ]+$/).test(comment)) {
      //判断输入的内容是否为空或者全部都是空字符
      message.showError("评论内容为空");
      return
    }
    else {
      let news_id = $(this).data('news-id');
      let comment_info = {
        'content': comment,
        'news_id': news_id,
      };
      // console.log(comment_info);
      $.ajax({
        method: 'POST',
        url: `/news/comments/${news_id}/`,
        contentType: 'application/json;charset=utf-8',
        data: JSON.stringify(comment_info),
        type: 'json',
        async: false
      })
          .done(function (res) {
            if (res.no === "0") {
              let item = res.data;
              let comment_li = `
                <li class="comment-item">
                                <div class="comment-info clearfix">
                                    <img src="/static/images/avatar.jpeg" alt="avatar" class="comment-avatar">
                                    <span class="comment-user">${item.author}</span>
                                </div>
                                <div class="comment-content">${item.content}</div>
                                <div class="comment_time left_float">${ item.update_time }</div>
                                <a href="javascript:void(0);" class="reply_a_tag right_float">回复</a>
                                <form class="reply_form left_float"
                                      data-parent-id="${item.id}"
                                      data-news-id="${item.news_id}">
                                    <textarea class="reply_input"></textarea>
                                    <input type="button" value="回复" class="reply_btn right_float">
                                    <input type="reset" name="" value="取消" class="reply_cancel right_float">
                                </form>
                </li>`;
              $('.comment-list').prepend(comment_li);
              //将最新评论加入到最前面
              comment_count += 1;
              $('.comment-count').html(comment_count);
              //文章评论数量+1
              $('.comment').val("")
              //评论完成清空评论框内容
            } else if (res.no === "4101") {
              message.showError(res.msg);
              setTimeout(function () {
                window.location.href = '/user/login/'
              }, 1500)
            }
            else {
              message.showError(res.msg)
            }
          })
          .fail(function () {
            message.showError("服务器超时，请重试！")
          })
    }
  });
  csrf()
});